<template>
  <!-- 鼠标右击显示数据 -->
  <ul class="context-menu" :style="{
    left:left + 'px',
    top: top + 'px'
  }">
    <li @click="del()">删除</li>
    <li @click="paste()">复制并粘贴</li>
  </ul>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { deepCopy } from 'assets/scripts/common';
export default {
  props: ['left', 'top'],
  computed: {
    ...mapState({
      activeCom: state => state.mark.activeCom,
      layout: state => state.mark.layout
    })
  },
  data () {
    return {}
  },
  methods: {
    ...mapMutations(['addComponents', 'addLayout', 'setMenuShow']),
    // 粘贴
    paste () {
      let currentCom = deepCopy(this.activeCom);

      // 位置在下一列
      currentCom.location.y++;

      // 序列号改变
      currentCom.location.i = this.layout.length;

      // 如果复制的是table，要去除colomn自动生成的__id，防止渲染错误
      if (currentCom.name === 'tableItem') {
        currentCom.config.columns.forEach(unit => {
          delete unit.__id;
        });
      }

      // 加到位置中
      this.addLayout(currentCom.location);

      // id 变化下
      currentCom.id = new Date().getTime();

      // key的改变
      currentCom.key = 'key' + currentCom.id;

      // 加到组件中
      this.addComponents(currentCom);

      // 菜单隐藏
      this.setMenuShow(false);
    },

    // 删除
    del () {
      this.$emit('remove')
    }
  },
  mounted () { }
}
</script>

<style lang="less" scoped>
.context-menu {
  position: absolute;
  width: 150px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  z-index: 9999;
  li {
    padding: 10px;
    cursor: pointer;
    &:hover {
      background: #3b98f2;
      color: #fff;
    }
  }
}
</style>
